<template>
	<el-input
		v-if="FieldItem?.tag !== 'span'"
		:type="changeType"
		:disabled="!activate"
		v-model="componentVal"
		:placeholder="comPlaceholder"
		clearable
		:style="{ width: handleStyle() }"
	/>
	<view v-else :style="getStyle || {}">{{ componentVal }} </view>
</template>

<script lang="ts" setup>
import useElement from './hooks/useElement';
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		filterIdx: number;
		located: string;
		pageData?: any;
		inputData: Record<string, any>;
		globalData?: any;
		modelValue: string;
		FieldItem: TabFieldType | null;
	}>(),
	{
		located: 'table',
		filterIdx: -1,
		pageData: {},
		globalData: null,
		modelValue: '',
		FieldItem: null,
	}
);
const { FieldItem, located, inputData, pageData, globalData } = toRefs(props);
const emit = defineEmits(['update:modelValue']);

const state = reactive({
	enableDisplay: true,
	activate: true,
	componentVal: '',
	handleStyle: () => {},
});

const { enableDisplay, activate, componentVal, handleStyle } = toRefs(state);
// 绑定值发生变化时更改
watch(
	() => props.modelValue,
	(newVal) => {
		if (FieldItem.value?.Accuracy?.open === '1' && props.modelValue !== componentVal.value) {
			componentVal.value = [undefined, null, NaN, ''].includes(newVal) ? '0.00' : Number(newVal).toFixed(FieldItem.value!.Accuracy.digit);
		} else if (FieldItem.value?.tag !== 'span') {
			// ??相较||比较严谨, 当值等于0的时候||就把他给排除了，但是?? 不会
			componentVal.value = newVal ?? '';
			// console.log('watch input', newVal);
		}
	},
	{
		immediate: true,
	}
);

// 改变输入框的类型
const changeType = computed(() => {
	let type = 'text';
	// el-input普通输入框 el-textarea多行输入框  el-password密码框
	if (FieldItem?.value?.InputType === 'el-input') {
		type = 'text';
	} else if (FieldItem?.value?.InputType === 'el-textarea' && located.value !== 'Filter') {
		type = 'textarea';
	} else if (FieldItem?.value?.InputType === 'el-password') {
		type = 'password';
	}
	return type;
});

const getStyle = computed(() => {
	if (FieldItem.value?.attrs) {
		return {
			width: FieldItem.value?.attrs.style.width ? FieldItem.value?.attrs.style.width + 'px' : '100%',
			height: FieldItem.value?.attrs.style.height + 'px',
			lineHeight: FieldItem.value?.attrs.style.lineHeight + 'px',
			background: FieldItem.value?.attrs.style.background,
			color: FieldItem.value?.attrs.style.color,
			borderRadius: FieldItem.value?.attrs.style.borderRadius + 'px',
			fontSize: FieldItem.value?.attrs.style.fontSize + 'px',
			textAlign: FieldItem.value?.attrs.style.textAlign,
		};
	}
	return {};
});

watch(
	() => componentVal.value,
	(newVal) => {
		if (FieldItem.value?.tag !== 'span') {
			emit('update:modelValue', newVal);
		}
	}
);

onBeforeMount(() => {
	// 如果是显示文本
	if (FieldItem.value?.tag === 'span') {
		setTimeout(() => {
			formatText();
		}, 100);
		watch(props.pageData, () => {
			// console.log('watch pageData', pageData.value);
			formatText();
		});
	}
});
const formatText = () => {
	if (/^\'.*\'$/.test(FieldItem.value?.attrs.text)) {
		const value = calcFieldValue(4, FieldItem.value?.attrs.text, props.inputData, props.pageData, props.globalData);
		componentVal.value = ![undefined, NaN, null, ''].includes(value) ? value : FieldItem.value?.attrs.nullVal ? FieldItem.value?.attrs.nullVal : '';
	} else {
		componentVal.value = FieldItem.value?.attrs.text;
	}
};
if (componentVal.value !== '' && FieldItem.value && FieldItem.value.Accuracy && FieldItem.value?.Accuracy?.open == '1') {
	const val = Number(componentVal.value);
	const digit = Number(FieldItem.value.Accuracy.digit);
	if (isNaN(val) || isNaN(digit)) {
		console.log('lx-input process value Accuracy error, value: ', componentVal.value, ' digit: ', FieldItem.value.Accuracy.digit);
		componentVal.value = '';
	} else {
		const fixedVal = val.toFixed(digit);
		if (fixedVal) {
			console.log('lx-input process value Accuracy error, digit: ', digit);
			componentVal.value = '';
		}
		componentVal.value = fixedVal;
	}
}

const setShowEnable = (enableShow: boolean) => {
	enableDisplay.value = enableShow;
};
const init = (params: any) => {
	enableDisplay.value = params.showEnable;
};
const notify = (params: any) => {
	console.log('notify', params);
};
const setActivate = (params: any) => {
	activate.value = params.activate;
};

if (FieldItem.value?.pageType && FieldItem.value.pageType === 'page') {
	state.handleStyle = () => {
		return '100%';
	};
	activate.value = !FieldItem.value.attrs.disabled;
} else {
	const { handleStyle, handleDisable } = useElement(located, FieldItem.value!, componentVal, props);
	state.handleStyle = handleStyle;
	handleDisable(activate);
}

defineExpose({ setShowEnable, init, notify, setActivate });
// console.log('result', result);

/**
 * @description: 计算输入框提示--因为自定义页面的输入框和表单的输入框配置信息可能不太一样
 * 需要处理一下
 */
const comPlaceholder = computed(() => {
	// 如果是自定义表单的提示,那么返回表单提示
	if (FieldItem.value?.TipsText || FieldItem.value?.TipsText === '') {
		return FieldItem.value?.TipsText;
	} else if (FieldItem.value?.attrs.placeholder || FieldItem.value?.attrs.placeholder === '') {
		// 如果是自定义页面的提示则返回自定义的提示
		return FieldItem.value?.attrs.placeholder;
	} else {
		// 如果都不是
		return '';
	}
});
</script>
